<template>
	<view class="flex-page-wrapper">
		<uni-nav-bar statusBar backgroundColor="#784DFF" color="#fff" title="特色专区"></uni-nav-bar>

		<view class="flex-page">
			<view class="special">
				<image class="img" src="https://static.inclusionconf.com/static/images/chat/quanyi.png" mode="widthFix"></image>
				<block v-for="(item, index) in btns" :key="index">
					<div class="btn" :style="{ top: item.top + 'rpx' }" @click="showFn(item)">
						{{ flag ? '立即前往' : '立即领取'}}
					</div>

					<div class="text" :style="{ top: item.textTop + 'rpx' }" @click="showQy(item)">权益规则</div>
				</block>
			</view>

			<iifaa-proof @ref="handleProofRef" @success="handleProofSuccess" :myStyle="{ title: { color: '#ffffff' }, subTitle: { color: '#ffffff' } }" />
		</view>
		<uni-drawer ref="drawer" mode="bottom" :mask-click="false" :width="750" height="400px">
			<template #top>
				<view class="drawer-top">
					<div class="title">权益规则</div>
					<image @click="closeFn" class="icon" src="https://static.inclusionconf.com/static/images/inner-tips-close.png" mode="widthFix"></image>
				</view>
				<view class="drawer-content">
					<view class="text" v-html="ruleText"></view>
				</view>
			</template>
		</uni-drawer>
		<web-tips v-if="showTips"></web-tips>
	</view>
</template>

<script>
	import protal from '@/api/protal.js'
	import rulesTexts from './rules.js'

	export default {
		data() {
			return {
				btns: [{
						text: '迪士尼',
						status: 0,
						top: 716,
						textTop: 716 - 200,
						appId: '2021004162662377',
						path: decodeURIComponent('pages%2Fgoods-detail%2Findex%3F__appxPageId%3D3%26id%3D6000000186002'),
						noIIFAA: true
					},
					{
						text: '绿茶',
						status: 0,
						top: 1080,
						textTop: 1080 - 200,
						appId: '2021003163680441',
						path: decodeURIComponent('pages%2FproofAuthorization%2Findex%3Fdata%3D%257B%2522sceneCode%2522%253A%2522IIFAA_CREDENTIALS_KABAO_INCLUSION_THEBUND_DETAIL%2522%257D')
					},
					{
						text: '霸王茶姬',
						status: 0,
						top: 1444,
						textTop: 1444 - 200,
						appId: '2021002162629140',
						path: 'pluginMarketing/receive/index/index?activityId=1164153267556319233'
					},
					{
						text: '奈雪',
						status: 0,
						top: 1808,
						textTop: 1808 - 200,
						appId: '2019032263650182',
						path: decodeURIComponent('pkgReceive%2Fpages%2FstudentCoupons%2Freceive%2Freceive%3Fai%3D32783%26gec%3DUCE6882246731305291261%26cac%3D749209076927303753')
					},
					{
						text: '高德打车',
						status: 0,
						top: 2656,
						textTop: 2656 - 684,
						appId: '',
						path: 'https://dache.amap.com/lowcode#/lowcode/page/Renderer?pageJsonUrl=%2Ftaxi-act-pro%2FFORM-A4B66O61WDZVDZ5IDNL5K82928342J4ZTRMCMD%2Fprod%2Findex.json'
					},
					{
						text: '曹操出行',
						status: 0,
						top: 3020,
						textTop: 3020 - 200,
						appId: '2021001105621295',
						path: ''
					},
					{
						text: '飞猪机票',
						status: 0,
						top: 3384,
						textTop: 3384 - 200,
						appId: '2018081461095002',
						path: decodeURIComponent('pages%2Findex%2Findex%3Ftab%3Dflight%26sht_track_info%3Dai8bl3q3f2%26nowCollectHome%3Dtrue%26ttid%3D12zfb000030941&query=nowCollectHome%3Dtrue')
					},
					{
						text: '飞猪通用',
						status: 0,
						top: 3748,
						textTop: 3748 - 200,
						appId: '2018081461095002',
						path: decodeURIComponent('pages%2Findex%2Findex%3Ftab%3Dhotel%26sht_track_info%3Dai8bl3q3f2%26nowCollectHome%3Dtrue%26ttid%3D12zfb000030941&query=nowCollectHome%3Dtrue')
					},
					{
						text: '飞猪酒店',
						status: 0,
						top: 4112,
						textTop: 4112 - 200,
						appId: '2018081461095002',
						path: encodeURIComponent('pages%2Findex%2Findex%3Ftab%3Dhotel%26sht_track_info%3Dai8bl3q3f2%26nowCollectHome%3Dtrue%26ttid%3D12zfb000030941&query=nowCollectHome%3Dtrue')
					},
					{
						text: '淘宝闪购',
						status: 0,
						top: 4476,
						textTop: 4476 - 200,
						appId: '2021005151656223',
						path: decodeURIComponent('pages%2Fwebview-redirect-transnavbar%2Fwebview-redirect%3Furl%3Dhttps%253A%252F%252Ftb.ele.me%252Fwow%252Falsc%252Fmod%252Fa96a6285ad9695afcfd844da%253FhideNavbar%253D1')
					},
				],
				proofRef: null,
				count: 0,
				ruleText: '',
				showTips: false,
				flag: false
			}
		},
		onLoad() {
			uni.hideShareMenu()
		},
		onShow() {
			this.showTips = true
			this.getData()
		},
		onHide() {
			this.showTips = false
		},
		methods: {
			getData() {
				protal.iifaaApplyFlag().then(res => {
					this.flag = (res.data == 1)
				})
			},
			handleProofRef(ref) {
				this.proofRef = ref;
			},
			closeFn() {
				this.$refs.drawer.close()
			},
			showQy(item) {
				this.ruleText = rulesTexts[item.text].content
				this.$refs.drawer.open()
			},
			showFn(item) {
				if (item.noIIFAA || this.flag) {
					this.link(item)
					return
				}
				this.proofRef.detail.__args__[0].handleInit('IIFAA_CREDENTIALS_THEBUNDCONFERENCE_INCLUSION_THEBUND');
			},
			handleProofSuccess(v) {
				if (v.detail && v.detail.__args__ && v.detail.__args__[0] && v.detail.__args__[0].data && v.detail.__args__[0].data.token) {
					const tokenId = v.detail.__args__[0].data.token
					protal.iifaahostedVp({ tokenId }).then(res => {
						this.getData()
					})
				}
			},
			link(item) {
				if (item.appId) {
					my.navigateToMiniProgram({
						appId: item.appId,
						path: item.path
					})
				} else {
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + encodeURIComponent(item.path)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex-page {
		overflow: auto;
		margin-top: -1px;
		background-color: #1E234B;
	}

	.special {
		display: block;
		width: 100%;
		position: relative;

		.img {
			width: 100%;
			margin-top: -196rpx;
		}

		.btn {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 630rpx;
			height: 34px;
			background: #1E234B;
			border-radius: 6px;
			font-family: AlibabaPuHuiTi_3_65_Medium;
			font-size: 15px;
			color: #FFFFFF;
			line-height: 21px;
			text-align: center;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.text {
			position: absolute;
			right: 60rpx;
			transform: translateY(-20px);
			padding: 10px;
			font-family: AlibabaPuHuiTi_3_65_Medium;
			font-size: 11px;
			line-height: 1;
			color: #FFFFFF;

		}
	}

	.drawer-top {
		height: 57px;
		border-bottom: 1px solid #E0E0E0;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.title {
			font-family: AlibabaPuHuiTi_2_85_Bold;
			font-size: 18px;
			color: #000000;
			line-height: 18px;
			text-align: left;
			font-style: normal;
		}

		.icon {
			position: absolute;
			right: 16px;
			top: 14px;
			width: 30px;
		}
	}
	
	.drawer-content {
		height: 320px;
		overflow: auto;
		margin-top: 20px;
		
		.text {
			padding: 0 20px 40px;
		}
	}
</style>